<template>
	<view class="custom-tabbar">
		<view v-for="(item, index) in list" :key="index" class="tabbar-item" :class="{ active: current === index }" @click="switchTab(item, index)">
			<view class="hint" v-if="index == 3 && showHint != 0"></view>
			<image :src="current === index ? item.selectedIconPath : item.iconPath" class="tabbar-icon" :class="{ publish: item.text == '发布' }" />
			<text class="tabbar-text" v-if="item.text != '发布'">{{ item.text }}</text>
		</view>
	</view>
	<up-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
		<view class="popupDom">
			<view class="popupDomCh">
				<view class="titleP">选择发布类型</view>
				<view class="pushList p20">
					<view class="pushItem p20 dis" @click="goPublish(1)">
						<view class="pushItemL dis">
							<view class="pItemL">
								<image src="/static/pen.png" mode="widthFix"></image>
							</view>
							<view class="pItemR dis">
								<view class="pItemRT">发布帖子</view>
								<view class="pItemRB">发布分享校园实况</view>
							</view>
						</view>
						<view class="pushItemR">
							<up-icon name="arrow-right"></up-icon>
						</view>
					</view>
					<view class="pushItem p20 dis colorP" @click="goErrand">
						<view class="pushItemL dis">
							<view class="pItemL">
								<image src="/static/run.png" mode="widthFix"></image>
							</view>
							<view class="pItemR dis">
								<view class="pItemRT">跑腿/互助</view>
								<view class="pItemRB">发布悬赏，请同学帮忙跑腿等</view>
							</view>
						</view>
						<view class="pushItemR">
							<up-icon name="arrow-right"></up-icon>
						</view>
					</view>
					<view class="pushItem p20 dis colorC" @click="goPublish(3)">
						<view class="pushItemL dis">
							<view class="pItemL">
								<image src="/static/msg.png" mode="widthFix"></image>
							</view>
							<view class="pItemR dis">
								<view class="pItemRT">进入超级话题</view>
								<view class="pItemRB">付费或参与其他校园超级话题</view>
							</view>
						</view>
						<view class="pushItemR">
							<up-icon name="arrow-right"></up-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="closeP" @click="close">取消</view>
		</view>
	</up-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
const show = ref(false);
const open = () => {};
const close = () => {
	show.value = false;
};

const goErrand = () => {
	close();
	uni.navigateTo({
		url: `/errand/publish/publish`
	});
};

const goPublish = (val) => {
	close();
	uni.navigateTo({
		url: `/pages/publish/index?val=${val}`
	});
};

const props = defineProps({
	list: {
		type: Array,
		default: () => [
			{
				pagePath: '/pages/index/index',
				text: '首页',
				isTabbar: true,
				iconPath: '/static/index.png',
				selectedIconPath: '/static/indexAtc.png'
			},
			{
				pagePath: '/pages/errand/index',
				text: '跑腿',
				isTabbar: true,
				iconPath: '/static/errand.png',
				selectedIconPath: '/static/errandAct.png'
			},
			{
				pagePath: '/pages/publish/index',
				text: '发布',
				isTabbar: false,
				iconPath: '/static/publish.png',
				selectedIconPath: '/static/publish.png'
			},
			{
				pagePath: '/pages/message/index',
				text: '消息',
				isTabbar: true,
				iconPath: '/static/message.png',
				selectedIconPath: '/static/messageAct.png'
			},
			{
				pagePath: '/pages/user/index',
				text: '我的',
				isTabbar: true,
				iconPath: '/static/user.png',
				selectedIconPath: '/static/userAct.png'
			}
		]
	},
	activeIndex: {
		type: Number,
		default: () => 0
	},
	isHint: {
		type: Number, // 1显示 0 不显示
		default: () => 0
	}
});
const showHint = ref(props.isHint);
const current = ref(props.activeIndex);
// 添加监听器
watch(
	() => [props.isHint, props.activeIndex], // 监听多个字段
	([newIsHint, newActiveIndex]) => {
		showHint.value = newIsHint;
		current.value = newActiveIndex;
	},
	{ immediate: true } // 可选：立即执行一次回调
);

// 切换 Tab
const switchTab = (item, index) => {
	if (item.text == '发布') {
		show.value = true;
	} else {
		if (item.isTabbar) {
			uni.switchTab({
				url: item.pagePath
			});
		} else {
			uni.navigateTo({
				url: item.pagePath
			});
		}
	}
};
</script>

<style scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 110rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: white;
	border-top: 1rpx solid #f0f0f0;
	z-index: 2025;
	/* 适配 iPhone 底部安全区域 */
	/* padding-bottom: env(safe-area-inset-bottom); */
}

.tabbar-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80rpx;
	height: 100%;
	/* background: #ccc; */
}
.hint {
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	background-color: #e73f32;
}

.tabbar-icon {
	width: 50rpx;
	height: 50rpx;
}
.publish {
	margin-top: 10rpx;
	width: 90rpx !important;
	height: 90rpx !important;
}

.tabbar-text {
	font-size: 24rpx;
}

.active .tabbar-text {
	color: #4f77e0;
	/* 选中颜色 */
}
.popupDom {
	/* height: 600rpx; */
	border-radius: 20rpx;
	background: #f7f8fa;
	overflow: hidden;
}
.popupDomCh {
	margin-bottom: 15rpx;
	width: 100%;
	/* height: calc(600rpx - 105rpx); */
	background: #fff;
}
.titleP {
	width: 100%;
	font-size: 35rpx;
	line-height: 100rpx;
	text-align: center;
	font-weight: 700;
}
.pushList {
	width: 100%;
}
.pushItem {
	margin-bottom: 15rpx;
	justify-content: space-between;
	align-items: center;
	height: 140rpx;
	background: #edf9dd;
	border-radius: 10rpx;
	overflow: hidden;
}
.pItemL {
	margin-right: 45rpx;
	height: 100%;
}
.pItemR {
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* #ifdef MP-WEIXIN */
	padding-top: 15rpx;
	/* #endif */
	height: 100%;
}
.pItemRT {
	font-size: 35rpx;
	color: #555555;
}
.colorP {
	background: #eff4ff;
}
.colorC {
	background: #fff9ef;
}
.pItemRB {
	padding-top: 10rpx;
	font-size: 24rpx;
	color: #787878;
}
image {
	/* margin-top: 0rpx; */
	width: 100rpx;
	/* transform: translateY(-10rpx); */
}
.closeP {
	line-height: 105rpx;
	text-align: center;
	background: #fff;
}
</style>
